<template>
	<view class="content">
        <u-navbar id="navbar" :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="附件详情">
        </u-navbar>

        <view class="uni-area boxH" :style="{height:boxH+'px',border:'1rpx solid transparent'}">
            <u-swiper class="u-m-t-40" :height="boxH*0.8" :autoplay="false" imgMode="widthFix"
                :list="list" radius="8" :current="current" @change="change">
            </u-swiper>
            <!-- <u-scroll-list class="u-m-t-40 u-p-b-0" :indicator="false">
                <view v-for="(item, index) in list" :key="index"
                    :class="['u-m-r-30','item','u-flex',index==current?'item-active':'']" @tap.stop="()=>current=index">
                    <u--image :showLoading="true" :src="item" width="186rpx" height="186rpx" radius="4" mode="widthFix"></u--image>
                </view>
            </u-scroll-list> -->
            <view class="list u-m-t-40 u-p-b-0">
                <view v-for="(item, index) in list" :key="index" 
                    :class="['u-m-r-30','item-box',index==current?'active':'']" @tap.stop="()=>current=index">
                    <view class="item">
                        <u--image :showLoading="true" :src="item" width="186rpx" height="186rpx" radius="4" mode="widthFix"></u--image>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                systemInfo: uni.getStorageSync('systemInfo'),
                boxH: 0,
                list: [
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                ],
                current: 0,
			}
		},

        mounted() { 
            this.boxH = uni.$u.sys().windowHeight - 44 - uni.$u.sys().statusBarHeight;
        },
            
		onLoad() {
            const data = uni.getStorageSync('accessoryData')
            // console.log('附件内容',data)
            this.list = []
            data.map((v,i)=>{
                this.list.push(v.url)
            })
		},


		methods: {
            back(){
                uni.navigateBack()
            },

            change(e){
                this.current = e.current
            }
		}
	}
</script>

<style lang="scss">
    .content{
        /deep/.u-swiper__wrapper__item__wrapper{
            align-content: center !important;
        }
        .list{
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            .item-box{
                display: inline-block;
                &:last-child{
                    margin-right: 0 !important;
                }
                .item{
                    width: 186rpx;
                    height: 186rpx;
                    border-radius: 8rpx;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .active{
                border: 1px solid #21A5F3;
            }
        }
    }
</style>
